<template>
    <control title="选项卡">
        <template slot="content">
            <el-form ref="form" :model="content" @submit.native.prevent label-width="80px" size="small" label-position="left">
                <div class="control-item-title">选项卡设置</div>
                <dragrank v-model="content.data" @change="handleChange"> </dragrank>
                <div class="button-adddata">
                    <el-button @click="handleAdditem" :disabled="content.data.length==10">添加选项</el-button>
                    <p class="tips">
                        最多添加10个选项卡，拖拽可改变选项卡顺序
                    </p>
                </div>
                <el-divider></el-divider>
                <div class="control-item-title" v-if="content.data.length">选项内容</div>
                <div class="select-photo" v-if="content.data.length">
                    <el-form-item label="选项名称">
                        <el-input type="text" @keyup.native.enter placeholder="输入选项名称" v-model="content.data[index].title" maxlength="6" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="添加商品">
                        <el-radio-group v-model="content.data[index].type">
                            <el-radio :label="1">选择商品</el-radio>
                            <el-radio :label="2">选择分类</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="empty"></div>
                    <goodsSelet v-if="contentData.type!=2" v-model="contentData.goods" :number="50" :limit="50-contentData.goods.length" @change="handleGoodsChange" @confirm="handleGoodsConfirm" @remove="handleGoodsRemove"></goodsSelet>
                    <classifySelect v-if="contentData.type==2" v-model="contentData.group" @confirm="handleGroupConfirm" @delete="handleGroupConfirm"></classifySelect>
                </div>
                <el-divider v-if="content.data.length"></el-divider>
                <div class="control-item-title">商品内容</div>
                <el-form-item label="商品名称">
                    <convert v-model="content.is_title" on="显示" off="隐藏"></convert>
                </el-form-item>
                <el-form-item label="商品价格">
                    <convert v-model="content.is_price" on="显示" off="隐藏"></convert>
                </el-form-item>
                <el-form-item label="商品按钮">
                    <convert v-model="content.is_button" on="显示" off="隐藏"></convert>
                </el-form-item>
            </el-form>
        </template>
        <template slot="style">
            <el-form ref="form" :model="facade" @submit.native.prevent label-width="90px" size="mini" label-position="left">
                <div class="control-item-title">列表样式</div>
                <choice :data="listData" width="112px" group="list_style" v-model="facade.list_style"></choice>
                <el-divider></el-divider>
                <div class="control-item-title">卡片样式</div>
                <el-radio-group v-model="facade.card_style">
                    <el-radio :label="1">无边白底</el-radio>
                    <el-radio :label="2">卡片投影</el-radio>
                    <el-radio :label="3">描边白底</el-radio>
                    <el-radio :label="4">无边透明底</el-radio>
                </el-radio-group>
                <el-divider></el-divider>
                <div class="control-item-title">卡片倒角</div>
                <choice :data="cardData" group="chamfer_style" v-model="facade.chamfer_style"></choice>
                <el-divider></el-divider>
                <div class="control-item-title">距离设置</div>
                <el-form-item label="商品间距">
                    <slider v-model="facade.margin" :min="0" :max="30"></slider>
                </el-form-item>
                <el-form-item label="左右边距">
                    <slider v-model="facade.padding" :min="0" :max="30"></slider>
                </el-form-item>
                <el-divider></el-divider>
                <!-- v1.1.5新增背景颜色 -->
                <div class="control-item-title">颜色设置</div>
                <el-form-item label="背景颜色">
                    <colour v-model="facade.background_color" colour="#F5F5F5"></colour>
                </el-form-item>
            </el-form>
        </template>
    </control>
</template>
<script type="text/javascript">
import control from '@/components/control.vue'
import choice from '@/components/choice.vue'
import colour from '@/components/colour.vue'
import slider from '@/components/slider.vue'
import convert from '@/components/convert.vue'
import dragrank from '@/components/dragrank.vue'
import tag from '@/components/tag.vue'
import classifySelect from '@/components/classifySelect/select.vue'
import goodsSelet from '@/components/goodsSelet/select.vue'
import photoSelect from '@/components/photoSelect/select.vue'
import hyperlinkSelect from '@/components/hyperlinkSelect/select.vue'



export default {
    components: {
        control,
        choice,
        colour,
        slider,
        convert,
        dragrank,
        classifySelect,
        goodsSelet,
        photoSelect,
        hyperlinkSelect,
        tag
    },
    data() {
        return {
            index: 0,
            data: {
                type: 1,
                goods: [],
                group: {}
            },
            listData: [{
                value: 1,
                icon: "le-icon-graphic-figure",
                name: "大图模式"
            }, {
                value: 2,
                icon: "le-icon-graphic-columns",
                name: "一行两个"
            }, {
                value: 3,
                icon: "le-icon-graphic-list",
                name: "列表模式"
            }, {
                value: 4,
                icon: "le-icon-graphic-sliding",
                name: "横向滑动"
            }],
            cardData: [{
                value: 0,
                icon: "le-icon-graphic-angle",
                name: "直角"
            }, {
                value: 1,
                icon: "le-icon-rounded-line",
                name: "圆角"
            }]
        };
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        contentData: {
            get() {
                let index = this.index;
                let data = this.content.data[index];
                return JSON.parse(JSON.stringify(data));
            },
            set(value) {
                let index = this.index;
                let data = JSON.parse(JSON.stringify(value));
                this.content.data[index] = data;
            }
        },
        content: {
            get() {
                return this.$store.getters.content;
            },
            set(value) {
                let data = {
                    key: "content",
                    value: value
                }
                this.$store.commit('finish/setAttribute', data)
            }
        },
        facade: {
            get() {
                return this.$store.getters.facade;
            },
            set(value) {
                let data = {
                    key: "facade",
                    value: value
                }
                this.$store.commit('finish/setAttribute', data)
            }
        }

    },
    /**
     * 页面渲染前
     * @return {[type]} [description]
     */
    created() {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {

    },
    methods: {
        handleGoodsChange(data) {
            let { index } = this;
            this.content.data[index].goods = data
        },
        handleGoodsConfirm(data) {
            let { index } = this;
            let goods = this.content.data[index].goods || [];
            goods = JSON.parse(JSON.stringify(goods));
            goods.push.apply(goods, data);
            this.content.data[index].goods = goods.splice(0, 20);
        },
        handleGoodsRemove(data) {
            let { index } = this;
            data = JSON.parse(JSON.stringify(data));
            this.content.data[index].goods = data;
        },
        handleGroupConfirm(data) {
            let { index } = this;
            data = JSON.parse(JSON.stringify(data));
            this.content.data[index].group = data;
        },
        handleChange(value) {
            this.index = value
        },
        /**
         * 添加元素
         * @return {[type]} [description]
         */
        handleAdditem() {
            if (this.content.data.length < 10) {
                this.content.data.push({
                    title: "名称",
                    type: 1,
                    goods: [],
                    group: {}
                });
            } else {
                this.$message({
                    message: '最多添加10个选项卡',
                    type: 'warning'
                });
            }

        },
    }
};
</script>
<style lang="less" scoped>
@import '../attribute.less';
</style>